<template>
	<view class="page-body">
		<view class="tag flex">
			<view></text>知名国际品牌</view>
			<view>7个工作日内发货</view>
			<view>每日更新新品</view>
		</view>
		<view class="coupon-tip flex">
			<view>惊喜</view>
			<view>此次购买，半价优惠券已为您节省***元</view>
		</view>
		<!-- 收货地址 -->
		<view class="address" @tap="selectAddress" >
			<view  v-if="!recinfo" class="flex noaddress">
				<view style="color: #999;" class="icon map"></view><text>请先选择收货地址</text>
				<view class="more icon xiangyou" style="color:#999" ></view>
			</view>
			<view v-else class="flex hasaddress">
				<view style="color: #999;" class="icon map left flex0"></view>
				<view class="right flex1">
					<view class="right-top flex">
						<text>收货人：{{recinfo.consignee}}</text>
						<text>{{recinfo.tel}}</text>
					</view>
					<view class="right-bottom">
						收货地址：{{recinfo.cities}}{{recinfo.address}}
					</view>
				</view>
				<view class="more icon xiangyou" style="color:#999" ></view>
			</view>
		</view>
		<!-- 购买商品列表 -->
		<view class="goods">
			<view class="goods-item flex" v-for="(row,index) in buylist" :key="index">
				<view class="goods-img flex0"><image :src="row.goods_img" mode=""></image></view>
				<view class="goods-right">
					<view class="goods-name text_over2">{{row.goods_name}}</view>
					<view class="goods-piece"><text style="color: #f23d3d;margin-right:20upx">￥{{row.price}}</text> 规格：{{row.spec}} </view>
				</view>
				<view class="count">X{{row.num}}</view>
			</view>
		</view>
		<!-- <view class="buy-list">
			<view class="row" v-for="(row,index) in buylist" :key="index">
				<view class="goods-info">
					<view class="img">
						<image :src="row.goods_img"></image>
					</view>
					<view class="info">
						<view class="title">{{row.goods_name}}</view>
						<view class="spec">选择{{row.spec}} 数量:{{row.num}}</view>
						<view class="price-number">
							<view class="price">￥{{row.price*row.num}}</view>
							<view class="number">
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	
		<!-- 明细 -->
		<view class="detail">
			<view class="row">
				<view class="nominal">
					商品金额
				</view>
				<view class="content">
					{{goodsPrice|toFixed}}
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					代金券
				</view>
				<view class="content">
					{{couponText|toFixedd}}
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					运费
				</view>
				<view class="content">
					+{{freight|toFixed}}
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					实付金额
				</view>
				<view class="content">
					{{goodsPrice|toFixed}}
				</view>
			</view>
		</view>
		<!-- 提示-备注 -->
		<view class="order">
			<view class="row">
				<view class="left flex0">
					备注 :
				</view>
				<view class="right">
					<input placeholder="选填,备注内容" v-model="note" />
				</view>
			</view>
		</view>
		<view class="blck"></view>
		<view class="footer">
			<view class="sum">合计:<view class="money">{{sumPrice|toFixed}}</view></view>
			<view class="btn" @tap="toPay">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {Decimal} from 'decimal.js'
	var that;
	var prevent;
	export default {
		data() {
			return {
				gid:"",
				buylist:[],		//订单列表
				goodsPrice:0.0,	//商品合计价格
				sumPrice:0.0,	//用户付款价格
				freight:0.00,	//运费
				note:'',		//备注
				deduction:0,	//抵扣价格
				recinfo:"",
				timer:"",
				coupon:0,
				couponText:"没有可用代金券",
				couponId:""
			};
		},
		onShow() {
			//页面显示时，加载订单信息
			uni.getStorage({
				key:'buylist',
				success: (res) => {
					this.buylist = res.data;
					this.goodsPrice=res.data[0].amount;
					this.gid = res.data[0].id;
					// if(res.data[0].addressList.length>0){
					// 	this.recinfo = res.data[0].addressList[0];
					// }else{
					// 	this.recinfo = ""
					// }
					//合计
					// let len = this.buylist.length;
					// for(let i=0;i<len;i++){
					// 	// 处理
					// 	this.goodsPrice = this.goodsPrice + (this.buylist[i].num*this.buylist[i].price);
					// }
					this.getCoupon()
				}
			});
			uni.getStorage({
				key:'selectAddress',
				success: (e) => {
					this.recinfo = e.data;
					uni.removeStorage({
						key:'selectAddress'
					})
				}
			})
			// if(!this.recinfo.consignee||this.recinfo.consignee==""){
			// 	uni.showModal({
			// 		title:"添加收货地址",
			// 		content:"您还未填写收货地址，点击确定前往添加收货地址",
			// 		showCancel:true,
			// 		success(res) {
			// 			if(res.confirm){
			// 				uni.navigateTo({
			// 					url:'../user/address/address?type=select'
			// 				})
			// 			}
					
			// 		},
			// 	})
			// }
		},
		onLoad(){
			that=this;
		},
		onHide() {
			
		},
		onBackPress() {
			//页面后退时候，清除订单信息
			this.clearOrder();
		},
		filters: {
			toFixed:function(x) {
				return '￥'+parseFloat(x).toFixed(2);
			},
			toFixedd:function(x){
				if(typeof x == 'string'){
					return x=x
				}else{
				    return x = '-￥'+parseFloat(x).toFixed(2);
				}
			}
		},
		methods: {
			clearOrder(){
				uni.removeStorage({
					key: 'buylist',
					success: (res)=>{
						this.buylist = [];
					}
				});
			},
			toPay(){  //提交订单
				//商品列表
				let paymentOrder = [];
				let goodsid=[];
				let len = this.buylist.length;
				for(let i=0;i<len;i++){
					paymentOrder.push(this.buylist[i]);
					goodsid.push(this.buylist[i].id);
				}
				if(paymentOrder.length==0){
					uni.showToast({title:'订单信息有误，请重新购买',icon:'none'});
					return ;
				}
				let buylist = this.buylist;
				let purchaseNum = buylist[0].num;
				let sku =  buylist[0].sku;
				let couponId = this.couponId;
				let coupon_amount = this.coupon;
				let adressId = this.recinfo.id;
				let postscript = this.note;// 订单附言 应该做防注入处理；
				let shipping_fee = "" //运费
				let insure_fee = ""//保价费用
				let amount = this.sumPrice
				
				//订单提交
				this.$https.POST({
					url:'/goodsPay/submitOrder',
					data:{
						gid:that.gid,
						num:purchaseNum,
						sku:sku,
						amount:amount,
						adressId:adressId,
						shipping_fee:shipping_fee,
						couponId:couponId,
						couponAmount:coupon_amount,
						postscript:postscript,
						insure_fee:insure_fee
					},
					success(res){
						uni.showLoading({
							title:"订单处理中",
							mask:true
						})
						prevent=true;
					}
				}).then((res)=>{
					let order_no = res.data.order_no;
					let queue_id = res.data.queue_id;
					that.timer=setInterval(()=>{
						setTimeout(()=>{
							that.paymentOrderStatus(queue_id,order_no)
						},0)
					},1000)
				})
			},
			getOrderStatus(){
				if(prevent)return;
			},
			paymentOrderStatus(qid,orderNo){//订单处理状态
				this.$https.POST({//下单
					url:'/goodsPay/orderStatus',
					data:{qid:qid,orderNo:orderNo},
					success(res){
						if(res.code==10000){
							let oid = res.data.oid
							uni.hideLoading()
							// uni.showToast({
							// 	icon:'none',
							// 	title:res.message,
							// 	success() {
							// 		
							// 	}
							// })
							uni.redirectTo({
								url:`../pay/payment/payment?oid=${oid}`
							})
							clearInterval(that.timer)//清除定时器
							prevent=false;
						}
					},
					failcb(res){
						uni.hideLoading()
						clearInterval(that.timer)
						prevent=false;
					}
				})
			},
			getCoupon(){
				this.$https.POST({
					url:"/user/useableCoupon",
					data:{
						amt:that.goodsPrice
					},
					isFailShowModal:false,
					success(res){
						that.coupon = res.data[0].amount;
						that.couponText = res.data[0].amount;
						that.couponId = res.data[0].id;
						that.sumPrice = doo(doo(nd(that.goodsPrice),nd(that.coupon),'-'),nd(that.freight),'+'); //精度处理
					},
					failcb(res){
						that.couponText = res.message;
						that.sumPrice = doo(nd(that.goodsPrice),nd(that.freight),'+'); //精度处理
					}
				})
			},
			//选择收货地址
			selectAddress(){
				uni.navigateTo({
					url:'../user/address/address?type=select'
				})
			}
		},
		onUnload() {
			clearInterval(this.timer)
		}
	}
	 function doo(a,b,operation){
		if(operation=="+"){
			return Decimal(a).add(b).toNumber();
		}
		if(operation=="-"){
			return Decimal(a).sub(b).toNumber();
		}
		if(operation=="*"){
			return Decimal(a).mul(b).toNumber();
		}
		if(operation=="/"){
			return Decimal(a).div(b).toNumber();
		}
		
	}
	function nd(num, m = 2) {
	   let temp = parseInt(Decimal(num).mul(Math.pow(10, m)).toNumber());
	   temp = Decimal(temp).div(Math.pow(10, m)).toNumber()
	   return temp;
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
.address{
	height: 150upx;background: url("") no-repeat left bottom/750upx auto #fff; margin-bottom: 20upx;
	.noaddress{
		height: 100%;justify-content: center;color: #999999;font-size: 28upx;position: relative;
		text{margin-left: 10upx;}
	}
	.more{position: absolute;right: 20upx;top: 56upx;color: #999;}
	.hasaddress{
		height: 100%; font-size:28upx; color:#666;
		.left{
			width: 80upx;text-align: center;
		}
		.right{
			padding: 0 70upx 0 6upx;
			.right-top{justify-content: space-between;padding-bottom: 6upx;}
			.right-bottom{line-height: 34upx;font-size: 26upx;}
		}
	}
	
}
.goods{
	background: #fff;
	.goods-item{
		padding:20upx 25upx ;box-sizing: border-box;
		.goods-img{
			width:140upx ;height: 140upx; border:1px solid #f3f3f3;
			image{width: 100%;height: 100%;}
		}
		.goods-right{
			margin-left: 26upx;color: #333333; align-self: flex-start;width: 500upx;
			.goods-name{padding-top: 10upx;height: 80upx;}
			.goods-piece{padding-top: 16upx;}
		}
		.count{align-self: flex-start;padding-top: 10upx;color: #999;}
	}
	.total{line-height: 80upx;height: 80upx;border-top: 1px solid #f3f3f3;text-align: right;padding-right:25upx ;
		text{font-size: 34upx;}
	}
}
.order{
	width: 100%;box-sizing: border-box;background: #fff;
	padding: 10upx 40upx;
	margin: 20upx auto;
	border-radius: 20upx;
	.row{
		padding: 20upx 0;
		height: 40upx;
		display: flex;
		align-items:center;
		.left{
			font-size: 28upx;
			width: 80upx;
		}
		.right{
			width: 100%;
			padding-left: 40upx;
			font-size: 26upx;
			color: #999;
			input{
				font-size: 26upx;
				color: #999;
			}
		}
	}
}
.blck{
	width: 100%;
	height: 100upx;
}
.footer{
		width: 100%;
		box-sizing: border-box;
		padding-left: 40upx;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		.sum{
			width: 50%;
			font-size: 28upx;
			margin-right: 10upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.money{
				font-weight: 600;
			}
		}
		.btn{
			padding: 0 30upx;
			height:100%;
			background-color: $maincolor;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
		}
	}
.detail{
	width: 100%;box-sizing: border-box;background: #fff;
	padding: 10upx 40upx;
	margin: 20upx auto 0;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-size: 26upx;
			color: $maincolor;
		}
	}
}
</style>
